<template>
  <el-upload
    v-bind="$attrs"
    v-on="$listeners"
    class="upload-demo"
    :action="endpoint"
    :headers="{ Authorization: token }"
    multiple
    :on-success="handleExcelImportSuccess"
    :on-error="handleExcelImportError"
    :on-remove="handleRemove"
    :on-preview="preview"
    :before-upload="beforeUpload"
    :file-list="value">
    <el-button :size="size" type="primary">点击上传</el-button>
    <!-- <div slot="tip" class="el-upload__tip">
      只能上传jpg/jpeg/png/pdf/doc/docx/xls/xlsx/txt文件
    </div> -->
  </el-upload>
</template>

<script>
export default {
  name: "UniversalUploadBtn",

  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },

    // token: {
    //   type: String,
    //   default: localStorage.getItem("token"),
    // },

    endpoint: {
      type: String,
      // default: "https://wechatpyzl.51yunmai.com/FileUpload/FileUpload",
      default: process.env.VUE_APP_UPLOAD,
    },

    size: {
      type: String,
      default: "small",
    },
  },
  computed: {
    token() {
      let ret = "Bearer " + localStorage.getItem("token")
      console.log(`token: `, ret)
      return ret
    },
  },
  data() {
    return {
      fileList: [],

      rules: {
        zhiduming: [
          { required: true, message: "请输入制度名", trigger: "blur" },
        ],
        banbenhao: [
          { required: true, message: "请输入版本号", trigger: "blur" },
        ],
        zhuguanbumen: [
          { required: true, message: "请选择部门", trigger: "change" },
        ],
        shengxiaoriqi: [
          {
            type: "date",
            required: true,
            message: "请选择生效日期",
            trigger: "change",
          },
        ],
        xiudingriqi: [
          {
            type: "date",
            required: true,
            message: "请选择修订日期",
            trigger: "change",
          },
        ],
      },

      // 加载
      loading: {},
    }
  },

  methods: {
    beforeUpload(file) {
      // const fileType = file.type
      // const isImage = fileType.startsWith("image/")

      // if (!isImage) {
      //   this.$message.error("只能上传图片文件！")
      //   return false // 阻止上传
      // }

      // 其他验证逻辑...

      this.loading = this.$loading({
        lock: true,
        text: "文件上传中...",
        spinner: "el-icon-loading",
        // background: 'rgba(0, 0, 0, 0.7)',
      })

      return true // 允许上传
    },

    // 验证提示
    handleExcelImportSuccess(response, file, fileList) {
      this.loading.close()
      // let fileAdapter = (response) => {
      //   return {
      //     name: response.name,
      //     url: response.ImageUrl,
      //     id: response.src,
      //     // 文件类型
      //     type: response.FileType.slice(1),
      //   };
      // };

      let fileAdapter = (item) => {
        let { response } = item
        let { raw } = item
        if (item && item.response) {
          return {
            name: response.data.fileName,
            url: response.data.url,
            id: response.data.ossId,
            // 文件类型
            type: raw.type,
          }
        }
        return item
      }

      if (response.code === 500) {
        this.$message.error("上传异常")
        let index = fileList.indexOf(file)
        fileList.splice(index, 1)
        let ret = fileList.map(fileAdapter)
        this.$emit("input", ret)
        return
      }

      // if (response.code === 200) {
      //   this.fileList.push(fileAdapter(response));
      //   this.$emit("input", this.fileList);
      // }
      let ret = fileList.map(fileAdapter)
      this.$emit("input", ret)
    },

    handleExcelImportError(err, file, fileList) {
      this.loading.close()
      console.log(err, file, fileList)
      this.$message.error("网络异常...")
    },

    handleRemove(file, fileList) {
      // this.fileList.
      // let index = fileList.find(item => item.url === file.url)
      this.fileList = fileList
      this.$emit("input", this.fileList)
    },

    // 预览列表文件
    preview(file) {
      // this.$bus.$emit("preview:image", {
      //   url: file.url,
      //   srcList: [file.url],
      // });

      const fileType = file.type
      const isImage = fileType.startsWith("image/")

      // 校验该属性是否是图片文件
      if (isImage) {
        this.$bus.$emit("preview:image", {
          url: file.url,
          srcList: [file.url],
        })
      } else {
        this.$downFile4(file.url, file.name)
      }
    },
  },

  created() {
    this.fileList = this.value
  },
}
</script>

<style lang="scss" scoped>
::v-deep.upload-demo {
  /* 取消上传动画 */
  & .el-upload-list__item {
    transition: none;
  }
}
</style>
